import {Component} from 'react'
import { Provider, Consumer } from './data'

function GrandSon(){
  const getData=(data)=>{
    console.log('爷爷数据：',data);
    return (
      <div>
        <h1>{data.num}</h1>
        <button onClick={()=>data.fn(Math.random)}>修改爷爷</button>
      </div>
    )
  }
  return(
    <div>
      <h2>孙子</h2>
      <hr />
      <div>
      <Consumer>
        {getData}
      </Consumer>
      </div>
      
    </div>
  )
}
function Son(){
  const getData=(data)=>{
    console.log('儿子接收',data);
  }
  return(
    <div>
      <h3>儿子</h3>
      <Consumer>
        {getData}
      </Consumer>
      <hr />
        <GrandSon/>
    </div>
  )
}
class App extends Component{
  state={
    count:1000,
    obj:{
      name:'小明',
      age:18
    }
  }
// 提供修改数据的方法
  fn=(data)=>{
this.setState({
  count:data,
})
  }
  render(){
    return(
    <Provider value={{num:this.state.count,a:2,fn:this.fn}}>
    
      <div>
        <h1>父</h1>
        <hr />
        <Son/>
        
      </div>
      </Provider>
    )
  }
  
}
export default App

